<template>
  <div class="home-container">
    <Header class="home-header" />
    <div class="home-bottom-container">
      <Menu class="home-menu" ></Menu>
        <div class="M_content">
            <!-- <transition name="move" mode="out-in"> -->
                <router-view ></router-view>
            <!-- </transition> -->

        </div>
    </div>
  </div>
</template>

<script>
  // import Header from 'components/Header.vue'
  

  export default {
    /* components: {
      Header,
    }, */
    data() {
      return {
        
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
    },
    watch: {
      $route(to) {
        /* if (to.path === '/flightSchedule') {
          this.collapseMenu();
        } */
      }
    }
  }
</script>
<style scoped>
  .home-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction:column;
    overflow: hidden;
    background-color: #F8F9FE;
  }
  .home-header {
      /* height: 50px; */
  }
  .home-menu {
     width: 230px;
     flex: 0 0 230px;
  }
  .home-bottom-container {
      display: flex;
      height: inherit;
      overflow-y: auto;
  }
  .M_content {
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
    margin: 20px;
    border-radius: 5px;
    background-color: #fff;
  }
</style>
